<template>
  <div>
    <el-dialog
      title="商品采集"
      :append-to-body="true"
      @close="closeDio"
      :visible.sync="show_goods"
      width="90%"
      style="padding:20px"
    >
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" class="search_prod tl">
            <el-form-item label>
              <el-input size="small" clearable v-model="keyword" placeholder="商品关键词"></el-input>
            </el-form-item>
            <el-form-item label>
              <el-select size="small" v-model="ddk_pid" placeholder="请选择推广位分类">
                <el-option
                  v-for="item in cateList"
                  :key="item.id"
                  :label="item.title?item.title:item.pid_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-row class="tl">
                <el-col :span="24">
                  <el-button
                    :loading="$store.state.isLoading"
                    size="small"
                    class="top_weiy"
                    type="primary"
                    @click="search_list(1)"
                  >查询</el-button>

                  <el-button
                    :loading="$store.state.isLoading"
                    size="small"
                    class="top_weiy"
                    type="primary"
                    @click="add_goods"
                  >采集</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="pd_20">
          <el-table
            ref="multipleTable"
            :data="list.data"
            v-loading="loading"
            header-row-class-name="head_color"
            stripe
            tooltip-effect="dark"
            style="width: 99.9%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" class="tc" width="35"></el-table-column>

            <el-table-column label="商品图片" width="100" align="center">
              <template slot-scope="scope">
                <div class="img_bor">
                  <img :src="$fnc.getImgUrl(scope.row.goods_image_url)" alt />
                </div>
              </template>
            </el-table-column>

            <el-table-column label="标题" min-width="120">
              <template slot-scope="scope" style="vertical-align: text-top;">
                <div class="tab_div">
                  <div>
                    <p>{{scope.row.goods_name}}</p>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="售价" min-width="150">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>最小拼团价：</span>
                    <span>{{scope.row.min_group_price / 100 | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>最小单买价格：</span>
                    <span>{{scope.row.min_normal_price / 100 | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>已售卖件数：</span>
                    <span>{{scope.row.sales_tip}}</span>
                  </div>
                  <div>
                    <span>佣金(千分比)：</span>
                    <span>{{scope.row.promotion_rate | keepTwoNum }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="卖家信息" min-width="130">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>店铺名字：</span>
                    <span>{{scope.row.mall_name}}</span>
                  </div>
                  <div>
                    <span>店铺类型：</span>
                    <span>{{merchant_type[scope.row.merchant_type]}}</span>
                  </div>
                  <div>
                    <span>描述分：</span>
                    <span>{{scope.row.desc_txt}}</span>
                  </div>
                  <div>
                    <span>服务分：</span>
                    <span>{{scope.row.serv_txt}}</span>
                  </div>
                  <div>
                    <span>物流分：</span>
                    <span>{{scope.row.lgst_txt}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="优惠券" min-width="150">
              <template slot-scope="scope">
                <div class="tab_div" v-if="scope.row.has_coupon">
                  <div>
                    <span>总量：</span>
                    <span>{{scope.row.coupon_total_quantity}}</span>
                  </div>
                  <div>
                    <span>剩余量：</span>
                    <span>{{scope.row.coupon_remain_quantity}}</span>
                  </div>
                  <div>
                    <span>门槛价格：</span>
                    <span>{{scope.row.coupon_min_order_amount / 100 | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>面额：</span>
                    <span>{{scope.row.coupon_discount / 100 | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>生效时间：</span>
                    <p>{{scope.row.coupon_start_time | getTimeFormat}}</p>
                  </div>
                  <div>
                    <span>失效时间：</span>
                    <p>{{scope.row.coupon_end_time | getTimeFormat}}</p>
                  </div>
                </div>
                <div class="tab_div" v-else>暂无</div>
              </template>
            </el-table-column>

            <el-table-column label="店铺券" min-width="130">
              <template slot-scope="scope">
                <div class="tab_div" v-if="scope.row.has_mall_coupon">
                  <div>
                    <span>总量：</span>
                    <span>{{scope.row.mall_coupon_total_quantity}}</span>
                  </div>
                  <div>
                    <span>剩余量：</span>
                    <span>{{scope.row.mall_coupon_remain_quantity}}</span>
                  </div>
                  <div>
                    <span>折扣：</span>
                    <span>{{scope.row.mall_coupon_discount_pct}}</span>
                  </div>
                  <div>
                    <span>最小使用金额：</span>
                    <span>{{scope.row.mall_coupon_min_order_amount | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>最大使用金额：</span>
                    <span>{{scope.row.mall_coupon_max_discount_amount | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>开始使用时间：</span>
                    <p>{{scope.row.mall_coupon_start_time | getTimeFormat}}</p>
                  </div>
                  <div>
                    <span>结束使用时间：</span>
                    <p>{{scope.row.mall_coupon_end_time | getTimeFormat}}</p>
                  </div>
                </div>
                <div class="tab_div" v-else>暂无</div>
              </template>
            </el-table-column>

            <el-table-column label="店铺收藏券" min-width="130">
              <template slot-scope="scope">
                <div class="tab_div" v-if="scope.row.clt_cpn_batch_sn">
                  <div>
                    <span>总量：</span>
                    <span>{{scope.row.clt_cpn_quantity}}</span>
                  </div>
                  <div>
                    <span>剩余量：</span>
                    <span>{{scope.row.clt_cpn_remain_quantity}}</span>
                  </div>
                  <div>
                    <span>门槛价格：</span>
                    <span>{{scope.row.clt_cpn_min_amt / 100 | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>面额：</span>
                    <span>{{scope.row.clt_cpn_discount / 100 | keepTwoNum}}</span>
                  </div>
                  <div>
                    <span>起始时间：</span>
                    <p>{{scope.row.clt_cpn_start_time | getTimeFormat}}</p>
                  </div>
                  <div>
                    <span>截止时间：</span>
                    <p>{{scope.row.clt_cpn_end_time | getTimeFormat}}</p>
                  </div>
                </div>
                <div class="tab_div" v-else>暂无</div>
              </template>
            </el-table-column>
          </el-table>

          <el-col :span="24" class="table_bottom">
            <el-col :span="20" class="tr">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list.all_num"
              ></el-pagination>
            </el-col>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      multipleSelection: "",
      keyword: "",
      show_goods: this.show,
      merchant_type: {
        1: "个人",
        2: "企业",
        3: "旗舰店",
        4: "专卖店",
        5: "专营店",
        6: "普通店"
      },
      cateList: {},
      ddk_pid: ""
    };
  },
  methods: {
    get_cate_list() {
      this.$api.getShops.ddk_promote_lists_all({}).then(res => {
        if (res.data.code == 200) {
          this.cateList = res.data.result;
        }
      });
    },
    closeDio() {
      this.$emit("isshow", false);
      this.show_goods = false;
    },
    search_list(page, page_size) {
      this.loading = true;
      page = page || 1;
      page_size = page_size || 10;
      var data = { page: page, page_size: page_size, keyword: this.keyword };
      this.$api.getShops.ddk_search_list(data).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
          this.currentPage = page;
        } else {
          this.$swal("操作失败！", res.data.result, "error");
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.search_list("", val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
       this.currentPage = val;
      this.search_list(val, this.pageSize);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    add_goods() {
      var str = "";
      if (this.multipleSelection.length <= 0) {
        this.$message.error("未选择采集对象");
      } else if (this.ddk_pid == "") {
        this.$swal("采集失败！", "请选择推广位分类", "error");
      } else {
        this.$swal({
          title: "您确定要采集这些商品吗",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要采集",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            var data = {
              goods_json: JSON.stringify(this.multipleSelection),
              ddk_pid: this.ddk_pid
            };
            this.$api.getShops.ddk_add_goods(data).then(res => {
              if (res.data.code == 200) {
                this.$swal("采集成功！", "您已经采集了这些商品。", "success");
              } else {
                this.$swal("采集失败！", "出错啦！", "error");
              }
            });
          }
        });
      }
    }
  },
  created() {
    this.get_cate_list();
  },
  computed: {},
  watch: {}
};
</script>
